<template>
  <px-dialog v-model="visible" class="equip-dialog" title="基本信息" width="600px" @open="openDialog" @close="closeDialog">
    <div class="equip-dialog-content">
      <div class="equip-dialog-item" v-for="(item, index) in rowData" :key="index">
        <div class="label">{{ item?.label }}</div>
        <div class="text">{{ item?.text }}</div>
      </div>
    </div>
  </px-dialog>
</template>
<script setup lang="ts">
import { computed, ref } from "vue";

// 调用父级-关闭弹窗
const emits = defineEmits(["closeDialog"]);
// 父级传过来的值
const props = defineProps({
  // 控制弹窗显示隐藏
  visible: {
    type: Boolean,
    default: false
  },
  // 表单数据
  rowData: {
    type: Array,
    default() {
      return [];
    }
  }
});
const visible = computed(() => props.visible);
// 页面本身的值
const rowData = ref([]);
// 打开弹窗
const openDialog = () => {
  rowData.value = props.rowData;
};
// 关闭弹窗
const closeDialog = () => {
  emits("closeDialog");
};
</script>
<style lang="scss" scoped>
.equip-dialog {
  .equip-dialog-content {
    .equip-dialog-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #000;
      .label {
        width: 20%;
        height: 36px;
        line-height: 36px;
      }
      .text {
        width: 80%;
        text-align: right;
        word-break: break-all;
      }
    }
  }
}
</style>
